<template>
    <div class="b0">
        <div class="a0">
            <div class="a1">
                <van-image round width="5rem" height="5rem" 
                    src="https://img1.baidu.com/it/u=2049051349,1410239031&fm=253&fmt=auto&app=138&f=JPEG?w=380&h=380" />
                <div class="b1">A同学</div>
            </div>
            <van-text-ellipsis :content="text1" expand-text="展开" collapse-text="收起" rows="3" class="b2" />
            <div class="a2">
                <img src="https://img2.baidu.com/it/u=3866704393,3801099831&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"/>
            </div>
            <div>
                <van-cell title="分享" @click="showShare = true" />
                <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelect" />

            </div>
        </div>
        <div class="a0">
            <div class="a1">
                <van-image round width="5rem" height="5rem" 
                    src="https://img1.baidu.com/it/u=3626015900,2065162474&fm=253&fmt=auto&app=138&f=JPEG?w=380&h=380" />
                <div class="b1">B同学</div>
            </div>
            <van-text-ellipsis :content="text2" expand-text="展开" collapse-text="收起" rows="3" class="b2" />
            <div class="a2">
                <img src="https://img1.baidu.com/it/u=981271408,2141277134&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"/>
            </div>
            <div>
                <van-cell title="分享" @click="showShare = true" />
                <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelect" />

            </div>
        </div>
        <div class="a0">
            <div class="a1">
                <van-image round width="5rem" height="5rem" 
                    src="https://img2.baidu.com/it/u=3517215973,2045260095&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300" />
                <div class="b1">C同学</div>
            </div>
            <van-text-ellipsis :content="text3" expand-text="展开" collapse-text="收起" rows="3" class="b2" />
            <div class="a2">
                <img src="https://img2.baidu.com/it/u=1298054989,2181948633&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500"/>
            </div>
            <div>
                <van-cell title="分享" @click="showShare = true" />
                <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelect" />

            </div>
        </div>
        <div class="a0">
            <div class="a1">
                <van-image round width="5rem" height="5rem" 
                    src="https://img2.baidu.com/it/u=179496948,1929668199&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400" />
                <div class="b1">D同学</div>
            </div>
            <van-text-ellipsis :content="text4" expand-text="展开" collapse-text="收起" rows="3" class="b2" />
            <div class="a2">
                <img src="https://img0.baidu.com/it/u=2945807521,2666038576&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"/>
            </div>
            <div>
                <van-cell title="分享" @click="showShare = true" />
                <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelect" />

            </div>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'

const text1 = '概念哥来力:假设地球是一颗粉笔，那么太阳就是一间教室。假设太阳是一颗粉笔，那么太阳系就是一个城镇。假设太阳系是一颗粉笔，那么银河系就是一个亚洲。假设银河系是一个粉笔，那么外面的星系团就和我们现在的太阳系差不多大。这是可观测宇宙。假设可观测宇宙是一颗粉笔，那么外面的宇宙是无限的。。';
const text2 = '冷知识蛋仔派对其实是古代用来惩罚囚犯用的在古代每到准备打巅峰的时候冈易就准备惩罚囚犯了他们给囚犯准备bug套餐用速八摧毁囚犯的神志然后开始强迫囚犯玩蛋仔派对一直玩到凌晨三四点期间囚犯会大喊大叫神崩溃甚至会被气死但还有更可怕的有的时候是4个人一起受惩罚共同去精神折磨';
const text3 = '花了六秒走进了教室花了六分钟认识了老师花了六小时认识了同桌花了六天熟悉了环境花了六周认识了全班同学花了六个月了解了全班同学花了六年才知道什么是分离小学六年我们熬过了9600节课240个星期12个学期一张试卷考散了一群人最后只剩下一张相片和一声再见我从希望成了后诲';
const text4 = '我生日那天我接到了一通电话可是是一通诈骗电话他说只要我给他转账1000元晚上就会得一个华为手机我知道他是骗子但还是给他了因为他是唯一一个记得我生日的人……晚上确实收到了一个华为手机那里还有张纸条:你是唯一一个信我的人…';
const showShare = ref(false);
const options = [
    { name: '微信', icon: 'wechat' },
    { name: '微博', icon: 'weibo' },
    { name: '复制链接', icon: 'link' },
    { name: '分享海报', icon: 'poster' },
    { name: '二维码', icon: 'qrcode' },
];

</script>
<style scoped>
.b0{
    background-color: rgb(255, 248, 240);
}
.a0{
    border-bottom: 1px solid;
}
.a1{
    display: flex;
}
.b1{
    margin-left: 15px;
    margin-top: 10px;
}
.b2{
    margin-left: 15px;
    margin-top: 25px;
}
.a2{
    background-color: rgb(231, 231, 231);
    margin-left: 15px
}
.a2 img{
    width: 50px;
    height: 50px;
}
</style>
